import React from 'react'
import { Select } from 'antd';
import './centerenergyconsumption.scss'
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
const options3 = {
    credits: {
        enabled: false,
    },
    chart: {
        type: 'column',
        backgroundColor: null,
        height: 250,
        width: 530,
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        labels: {
            style: {
                color: 'white'
            }
        },
        lineColor: 'rgba(201, 201, 201, 201)',
        categories: [
            '08/01', '08/02', '08/03', '08/04', '08/05', '08/06', '08/07', '08/08'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        title: {
            text: ''
        },
        labels: {
            style: {
                color: 'white'
            },
        },
        tickPositions: [100, 200, 300, 400, 500, 600, 700]
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0
        }
    },
    series: [{
        name: '煤炭消耗',
        data: [300, 400, 200, 500, 700, 400, 600, 555],
        color: {
            linearGradient: [0, 0, 0, 150],
            stops: [
                [0, 'rgb(2,217,214)'],
                [1, 'rgb(27,131,214)']
            ]
        }
    }, {
        name: '电力消耗',
        data: [555, 600, 400, 700, 500, 200, 400, 300],
        color: {
            linearGradient: [0, 0, 0, 150],
            stops: [
                [0, 'rgb(37,116,218)'],
                [1, 'rgb(125,8,252)']
            ]
        }
    }],
    legend: {
        align: 'center',
        verticalAlign: 'top',
        itemStyle: {
            color: '#fff',
            fontWeight: 400
        }
    }
}

const Charts3 = () => <div>
    <HighchartsReact
        highcharts={Highcharts}
        options={options3}
    />
</div>

function Center_Energy_consumptio() {
    // 下拉菜单
    const { Option } = Select;
    function handleCenterSelect(value) {
        console.log(`selected ${value}`);
    }


    return (
        <div className='center_Energy_consumption_box'>
            {/* 上 */}
            <div className='center_Energy_consumption_box_top'>
                <div className='center_Energy_consumption_box_top_box'>
                    <div >
                        <p>本月用电量</p>
                        <h3>1,752 <span> kwh</span></h3>
                    </div>

                    <div>
                        <p>单位面积碳排</p>
                        <h3>1,840 <span> tCO₂/m²</span></h3>
                    </div>

                    <div>
                        <p>节能改造减排</p>
                        <h3>764 <span> tCO₂</span></h3>
                    </div>

                    <div>
                        <p>实时变压器负载</p>
                        <h3>72 <span> %</span></h3>
                    </div>

                </div>
                <div>
                    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleCenterSelect}>
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                </div>
            </div>
            {/* 下 */}
            <div className='center_Energy_consumption_box_bottom'>
                <div>
                    <h2 style={{ color: "white", margin: "3% 0px -7px 5%", fontSize: 20 }}>园区能耗</h2>
                </div>
                <div>
                    <Charts3 />
                </div>
            </div>
        </div>
    )
}

export default Center_Energy_consumptio